<template>
  <div @touchstart="checkTouchStart" @touchend="checkTouchEnd" style="height: 9.5rem;" v-if="goodsList" ref="mScroll">
    <banner style="width:100%; height: 100%; position:relative;" :bounce="true">
      <ul class="scroller_list cate_list"
          style="height:9.5rem; padding:0.5rem ;float: left;display:block;display: flex ;min-width: 100%;position: relative">
        <li v-for="(val,index) in showList" :key="index"
            style="margin-right:0.5rem; height:100%; width:5rem;padding:0;position:relative">

          <div style=" width:5rem;height:5rem;position: relative;margin-bottom:0.3rem ;overflow: hidden">
            <img style="width:100%;height:100%;display: inline-block;position:static;margin: 0" @click='jumpEvent(val)'
                 :src="val.mainPic||static/image/demo1.png"/>
          </div>
          <!-- padding: 0 0.1rem ; -->
          <h3 class="cjy-text-overflow" style="text-align: left ;font-size: 0.7rem;margin: 0">
            {{val.goodsName ? val.goodsName : "&nbsp;"}}
          </h3>
         <div style="text-align: left;display: flex;align-items: center;height: 1.0rem;">
           <!-- <del class="normal-price" v-if="val.showNormalPrice != val.showWsPrice">¥{{parseFloat(val.showNormalPrice).toFixed(2)}}</del> -->
           <span style="padding:0rem 0.12rem 0rem 0.12rem;font-size:0.45rem;height:20px;line-height:19px" v-if="val.showNormalPrice != val.showWsPrice"></span>
           <span v-else>{{'\r'}}</span> 
        </div>
        <div class="clearfix">
            <p style="text-align: left ;padding:0.1rem 0.1rem;float:left">
              <span class="prices_text" style="font-size: 0.7rem;">¥<em
                style="font-size: 0.7rem">{{val.goodsPrice ? parseFloat(val.showWsPrice).toFixed(2) : "0.00"}}</em></span>
              <!--<span v-if="val.goodsUnit "
                    style="font-size: 0.6rem ;display: inline-block">
                /{{val.showUnit}}
              </span>-->
            </p>

            <!--<p v-if="val.goodsType ==6" style="text-align: left ;padding:0.1rem 0.1rem">-->
            <!--<span class="prices_text" style="font-size: 0.7rem;">¥<em-->
            <!--style="font-size: 0.7rem">{{val.eachPrice ? parseFloat(val.eachPrice).toFixed(2) : "0.00"}}</em></span>-->
            <!--<span v-if="val.goodsUnit "-->
            <!--style="font-size: 0.6rem ;display: inline-block">-->
            <!--/{{val.goodsUnit}}-->
            <!--</span>-->
            <!--</p>-->

            <div style="width: 1rem;height: 1rem;float:right">
              <updata-cart :addCartButtonType="2.1"
                          :goodsId="parseInt(val.goodsId)"
                          :commodityInfor="val">

              </updata-cart>
            </div>
        </div>

        </li>

        <li v-if="routerWay" style=" width: 1rem!important;height: 100%;">
        </li>

        <router-link v-if="routerWay" tag="li" :class="{'cjy-detail' :!isLowVersion}" class="cjy-more"
                     :to="routerWay">
          <div class="cjy-text-box"
               style="">
            <span class="cjy-text-center" style="color: white">套餐详情</span>
            <!--<i class="icon njfont nj-xianghou"></i>-->
          </div>
          <img v-if="false"
               src="static/image/slide.png"
               style="height: 100%;width: auto;margin: 0"/>
        </router-link>
      </ul>
    </banner>
  </div>
</template>

<script>
  import {mapGetters, mapMutations} from "vuex";
  import Banner from '../BannerScroll'
  import UpdataCart from '@/real-components/UpdateCart'
  import {translateDetailData} from '@/utils/TranslateDetailDate'

  export default {
    props: {
      goodsList: {
        type: Array,
        default: () => []
      },
      finalListtow: {
        type: Object,
        default: null
      },
      routerWay: {
        type: Object,
        default: null
      },

    },
    data() {
      return {
        top: 0,
        isLowVersion: false,
      }
    },
    components: {
      Banner,
      UpdataCart
    },
    computed: {
      ...mapGetters('xxy', [
        "getscrollTop",
        "getstoptouch"
      ]),
      showList() {
        var goodsList = this.goodsList
        var showList = goodsList.map((item) => {
          return translateDetailData(item)
        })
        return showList

      },
    },
    methods: {
      ...mapMutations('xxy', [
        "setscrollTop",
        "setstoptouch"
      ]),
      jumpEvent(item) {

        setTimeout(() => {
          // 跳到商品详情
          this.$router.push({
            path: 'detail?code=' + (item.goodsNo || item.goodsCode)
          })
//					var node = document.getElementById("scrollOuter")
//					this.setscrollTop(node.scrollTop)
//					localStorage.setItem('scrollTop', this.getscrollTop)
        }, 300);

      },
      checkTouchStart(e) {
        this.setstoptouch(false)
        this.touchStartObj = {
          pageX: e.touches[0].pageX,
          pageY: e.touches[0].pageY
        }
      },
      checkTouchEnd(e) {
      }
    },
    created() {
      var phoneInfo = window.navigator.userAgent
      var reg = /iphone*/gi
      if (reg.test(phoneInfo)) {
      }

    },
    mounted() {
    }
  }
</script>

<style>
  .see_more {
    width: 13vw !important;
    /*border-radius: 0 !important;*/
    /*	position: absolute;*/
    padding-left: 10px;
    margin-right: 0.5rem;
  }

  .scroller_list .see_more {
    height: 6rem;
    float: right !important;
    writing-mode: unset;
  }

  .iscroll_list {
    height: 10rem;
  }

  .scroller_list li {
    width: 5rem;
  }

  .scroller_list li img {
    height: 4.5rem;
    width: 4.5rem;
  }

  .cjy-detail {
    /*-webkit-border-radius: 50% 0 0 50% /50% 0 0 50%;*/
    /*-moz-border-radius: 50% 0 0 50% /50% 0 0 50%;*/

  }

  .cjy-more {
    height: 100% !important;
    width: 2rem !important;
    padding: 0 0 0 0;
    vertical-align: middle;
    text-align: center;
    position: absolute;
    right: 0;
  }

  .cjy-text-box {
    width: 1.2rem;
    height: 5rem;
    position: absolute;
    right: 0;
    top: 40%;
    transform: translatey(-50%);
    font-size: 0.7rem;
    line-height: 0.8rem;
    border-radius: 0.9rem 0 0 0.9rem;
    background: rgb(100, 100, 100);
    opacity: 0.5
  }

  .cjy-text-center {
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 0.6rem;
    transform: translate(-50%, -50%);
  }

  .cjy-text-overflow {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
  }

  .clearfix:after{
   content:".";
   display:block;
   height:0;
   clear:both;
   visibility:hidden;
  }
  .clearfix{zoom:1;}
</style>
